---
title: Getting started
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import dartHelloWorld from "/docs/getting_started/dart_hello_world";
import helloWorld from "/docs/getting_started/hello_world";
import { trimSnippet } from "../../../../src/components/CodeSnippet";

Vor einem tiefen Einstieg in die genaue Funktionsweise und Mechanismen von [Riverpod], fangen wir zunächst mit den Basics an:
Installation von [Riverpod], dann schreiben wir ein "Hello World".

## Welches Paket ist zu installieren

Zunächst müssen wir uns klar machen, dass [Riverpod] über mehrere Pakete verteilt ist, die leicht unterschiedlich genutzt werden.
Welche Variante von [Riverpod] eingesetzt werden soll, hängt von der App ab, die entwickelt werden soll.

Die folgende Tabelle hilft bei der Entscheidung, welches Paket eingesetzt werden soll:
You can refer to the following table to help you decide which package to use:

| App Typ                   | Paket Name                                                                        | Beschreibung                                                           |
| ------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| Flutter + [flutter_hooks] | [hooks_riverpod]                                                                  | Erlaubt die Nutzung von beiden Paketen [flutter_hooks] und [Riverpod]. |
| Flutter only              | [flutter_riverpod]                                                                | Ein einfacher Weg um [Riverpod] in Flutter Applikationen zu verwenden. |
| Dart only (No Flutter)    | [riverpod](https://github.com/rrousselGit/riverpod/tree/master/packages/riverpod) | Eine [Riverpod] Version ohne die Flutter Klassen.                      |

## Installation des Pakets

Wenn die Entscheidung getroffen wurde, welches Paket verwendet werden soll, füge folgendes in deine `pubspec.yaml` Datei ein:

<Tabs
  groupId="riverpod"
  defaultValue="hooks_riverpod"
  values={[
    { label: 'Flutter + flutter_hooks', value: 'hooks_riverpod', },
    { label: 'Flutter', value: 'flutter_riverpod', },
    { label: 'Dart only', value: 'riverpod', },
  ]}
>
<TabItem value="hooks_riverpod">

```yaml title="pubspec.yaml"
environment:
  sdk: ^3.8.0
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks:
  hooks_riverpod: ^3.0.0-dev.12
```

Dann führe `flutter pub get` aus.

</TabItem>
<TabItem value="flutter_riverpod">

```yaml title="pubspec.yaml"
environment:
  sdk: ^3.8.0
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^3.0.0-dev.12
```

Dann führe `flutter pub get` aus.

</TabItem>
<TabItem value="riverpod">

```yaml title="pubspec.yaml"
environment:
  sdk: ^3.8.0

dependencies:
  riverpod: ^3.0.0-dev.12
```

Dann führe `flutter pub get` aus.

</TabItem>
</Tabs>

Das war's. Du hast [Riverpod] zu deiner App hinzugefügt!

## Anwendungsbeispiel: Hello World

Nachdem du [Riverpod] installiert hast, kannst du es anfangen zu verwenden.

Die folgenden Snippets zeigen, wie die neue Dependency dazu verwendet werden kann um ein "Hello world" zu erstellen:

export const foo = 42;

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: "Flutter", value: "flutter_riverpod" },
    { label: "Dart only", value: "riverpod" },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...helloWorld}
></AutoSnippet>

Das kannst du dann mit `flutter run` ausführen.
Das wird dir "Hello world" aufs Gerät rendern.

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...dartHelloWorld}
></AutoSnippet>

Das kannst du dann mit `flutter run` ausführen.
Das wird dir "Hello world" aufs Gerät rendern.

</TabItem>
</Tabs>

## Weiterführend: Installation von Code Snippets

Wenn du `Flutter` und `Vscode` verwendest, schau dir [Flutter Riverpod Snippets](https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets) an

Wenn du `Flutter` und `Android Studio` oder `IntelliJ` verwendest, schau dir [Flutter Riverpod Snippets](https://plugins.jetbrains.com/plugin/14641-flutter-riverpod-snippets) an

![img](/img/snippets/greetingProvider.gif)

[riverpod]: https://github.com/rrousselgit/riverpod
[hooks_riverpod]: https://pub.dev/packages/hooks_riverpod
[flutter_riverpod]: https://pub.dev/packages/flutter_riverpod
[flutter_hooks]: https://github.com/rrousselGit/flutter_hooks
